<template>
  <div class="upload-img">
    <ul class="upload-list">
      <li v-for="(item,index) in picList" :key="index">
        <img :src="item" alt="">
        <div class="caozuo">
          <el-button @click="previewImg(item)" type="danger" icon="el-icon-search" circle></el-button>
          <el-button @click="deleteCarouselMap(idList[index])" type="danger" icon="el-icon-delete" circle></el-button>
        </div>
        <div class="check-delete">

          <el-switch
              active-value=01
              inactive-value=02
              v-model="CMSList[index]"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="getCMS(idList[index],CMSList[index])"
              enctype=“multipart/form-data
          ></el-switch>
        </div>
      </li>


      <li class="add-img">
        <input @change="addCarouselMap" type="file">
        <i v-if="!loading" class="iconfont  icon-tianjia"></i>
        <i v-else class="iconfont loading icon-jiazai"></i>
        <img data-v-74fe5d5e="" src='../../assets/icon/map_add.jpg' alt="">
      </li>
    </ul>


    <div class="preview-box" v-if="ispreview" @click.self="ispreview=false">
      <img :src="previewItem" alt="">
    </div>
  </div>
</template>
path('banners/',views.banners,name='banners'),

<script>
export default {
  created() {
    this.getAllRotationMap()//获取轮播图
    this.addCarouselMap()//上传轮播图
    this.getCMS()//获取图片是否启用 CMS:CarouselMapStatus
    this.updataCMS()//更改图片启用状态
    this.deleteCarouselMap(id)
    this.previewImg()
    this.deleteImg()
  },
  data() {
    return {
      picList: [],//接受轮播图
      loading: false,  //加载效果
      previewItem: '', //用于预览
      ispreview: false, //是否打开预览
      idList: [],//获取轮播图id
      open: true,//接受轮播图状态
      close: false,
      CMSList: [],//接受轮播图状态值 01/02
    }
  },
  props: {
    num: {
      type: Number,
      default: 50 //限制图片的张数
    }
  },

  mounted() {

  },
  methods: {
    //获取所有轮播图与id
    async getAllRotationMap() {
      const {data: res} = await this.$http.get("/selectAllCarouselMap")
      if (res.flag == 0) {
        this.picList = []
        for (var i = 0; i < res.data.length; i++) {
          this.picList.push(res.data[i].img)
          this.idList.push(res.data[i].id)
          this.CMSList.push(res.data[i].status)
        }
      }
    },
    //获取图片启用状态
    async getCMS(id, status) {
      const {data: res} = await this.$http.get("/updateCarouselMapStatus?id=" + id + "&status=" + status)
      if (res.code == 0) {
        this.$message({
          message: "状态修改成功",
          type: "success"
        });
      } else {
        this.$message({
          message: "状态修改失败",
          type: "error"
        });

      }
    },
    //删除图片
    deleteCarouselMap(id) {
      this.$confirm('将永久删除该图片且不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false,    //关闭点击屏幕外侧触发关闭
        showClose: false             //关闭右上角叉叉
      }).then(async () => {
        const {data: res} = await this.$http.get("/deleteCarouselMap?id=" + id)
        console.log(res)
        if (res.code == 0) {
          //刷新product页面
          await this.getAllRotationMap()
          this.$message.success("删除成功！")
        } else {
          this.$message.error("删除失败！")
        }
      }).catch(() => {
        //点击了取消
        this.$message("已取消")
      })
    },

    //上传图片
    addCarouselMap(e) {


      console.log(e)
      this.file = e.target.files[0]
      let fd = new FormData
      fd.append('file', this.file)
      // console.log(fd.get('file'))
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
        const {data: res} = this.$http.put("/addCarouselMap", fd, config)
        console.log(res)
        //刷新product页面
        this.$message.success("上传成功，请刷新页面").setTimeout(()=>this.getAllRotationMap(),1000)
        // await this.getAllRotationMap()

    },


    //   this.$confirm('将永久删除该图片且不可恢复, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning',
    //     closeOnClickModal: false,    //关闭点击屏幕外侧触发关闭
    //     showClose: false             //关闭右上角叉叉
    //   }).async()
    // =>
    //   {
    //     const {data: res} = this.$http.put("/addCarouselMap", fd, config)
    //     await this.getAllRotationMap()
    //   }
    // .
    //   catch(() => {
    //     //点击了取消
    //     this.$message("已取消")
    //   })
    //
    // }


    //预览图片
    previewImg(item, index) {
      this.ispreview = true
      this.previewItem = item
      this.$emit('preview', item)
    },
    /***获取图片上传的本地路径****/
    localPreview(list) {
      //这里是利用文件读取对象读取图片
      // var reader = new FileReader();
      // reader.readAsDataURL(file);
      // var url=null;
      // reader.onload=function(){
      //     url=reader.result;
      // }
      var url = null;
      var arr = []
      list.forEach(item => {
        arr.push(window.URL.createObjectURL(item)) //利用window.URL.createObjectURL转换
      })
      return arr

    }
  },

}
</script>

<style lang="less" scoped>
ul, li {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

p {
  padding: 0px;
  margin: 0px;
}

.upload-list {
  width: 100%;
  display: flex;

  flex-wrap: wrap;
}

.upload-list li {
  width: 200px;
  position: relative;
  margin: 50px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
  box-sizing: border-box;
}

.upload-list li:hover .caozuo {
  display: flex;
}

.check-delete {
  width: 20px;
  position: center;
  left: revert;
  align-content: center;
  left: 0px;
  top: 50px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: white;
  letter-spacing: 50px;
  margin: 1%;

}

.caozuo {
  display: none;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: white;
  letter-spacing: 5px;
}

.caozuo .iconfont {
  font-size: 25px;
}

.upload-list li img {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.upload-img {
  width: 100%;
}

.add-img {
  width: 32%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.add-img .iconfont {
  font-size: 40px;

}

.add-img input {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}

.loading {

  animation: carton 5s infinite;
}

.preview-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.5)
}

.preview-box img {
  max-width: 100%;
  max-height: 100%;
}

@keyframes carton {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>